<template>
    <div style="padding-top: 1px">
        <div class="search">
            <nav class="searchList-nav" ref="change">
                <span :class="{isActive: toggle == 'Songs'}" @click="handlerChangeView('Songs')">歌曲</span>
                <span :class="{isActive: toggle == 'SongLists'}" @click="handlerChangeView('SongLists')">歌单</span>
            </nav>
            <component :is="currentView"></component>
        </div>
    </div>
</template>

<script>
    import SearchSongs from "@/components/search/SearchSongs";
    import SearchSongLists from "@/components/search/SearchSongLists";
    export default {
        name: "Search",
        components: {SearchSongLists, SearchSongs},
        data(){
            return{
                toggle: 'Songs',
                currentView: 'SearchSongs',
            }
        },
        methods:{
            //切换组件
            handlerChangeView(component){
                this.currentView = 'Search' + component;
                this.toggle = component;
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../assets/css/search";
</style>